<template>
  <div class="basetable" element-loading-text="拼命加载中">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <el-button size="small" type="primary" @click="add">创建班级</el-button>
        <span class="spansearch">班级名称</span>
        <el-input
         size="small"
          placeholder="请输入搜索内容"
          style="width:350px;margin-left: 16px;"
          @input="searchClick"
          clearable
          v-model="input1"
        >
        </el-input>
    </div>
    <div class="tableMain">
      <el-table :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
      style="width: 100%">
        <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
        <el-table-column  prop="name" label="班级名称" width="150"></el-table-column>
        <el-table-column prop="nums" label="班级人数" width="100"></el-table-column>
        <el-table-column prop="start_time" label="开班时间" width="120"></el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="120"></el-table-column>
        <el-table-column prop="money" label="费用情况" width="180"></el-table-column>
        <el-table-column label="班级状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0">未结班</el-tag>
            <el-tag v-else type="danger">已结班</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="btbz" label="补贴标准" width="180"></el-table-column>
        <el-table-column prop="area" label="地区" width="180"></el-table-column>
        <el-table-column prop="bzr_tel" label="班主任联系电话" width="180"></el-table-column>
        <el-table-column prop="total_day" label="总培训时间" width="180"></el-table-column>
        <el-table-column prop="ks_time" label="考试时间" width="180"></el-table-column>
        <el-table-column prop="sk_time_1" label="上午授课时间" width="180"></el-table-column>
        <el-table-column prop="sk_time_2" label="下午授课时间" width="180"></el-table-column>
        <el-table-column prop="sk_time_3" label="晚上授课时间" width="180"></el-table-column>
        <el-table-column prop="skdd" label="授课点" width="180"></el-table-column>
        <el-table-column prop="fzr_tel" label="授课点负责人电话" width="180"></el-table-column>
        
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
            <el-button
              size="small"
              :disabled="scope.row.status == 0 ? false:true"
              @click="addClass(scope.row)"
            >添加课程</el-button>
            <!-- <el-button
              size="small"
              :disabled="scope.row.status == 0 ? false:true"
              @click="addteacher"
            >添加教师</el-button> -->
            <el-button
              ref="btn1"
              size="small"
              type="warning"
              :disabled="scope.row.status == 0 ? false:true"
              @click="editClass(scope.$index,scope.row)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="delClass(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 创建or添加 -->
    <el-dialog :title="title" width="980px" :visible.sync="dialogFormVisible" @close='closeDialog(value)'>
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="地区" 
            :rules="[
                { required: true, message: '地区不能为空'}
              ]"
            :label-width="formLabelWidth">
              <div id="app">
                <el-cascader
                  size="large"
                  :options="optionsaa"
                  v-model="areaa"
                  @change="handleChange"> 
                </el-cascader>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班级名称"
            :rules="[
                { required: true, message: '班级名称不能为空'}
              ]"
            :label-width="formLabelWidth">
              <el-input clearable v-model="form.name" placeholder="请输入班级名称" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="授课地点" prop="skdd"
            :label-width="formLabelWidth">
          <el-input clearable v-model="form.skdd" placeholder="请输入授课地点" style="width:200px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="开班时间" :label-width="formLabelWidth">
              <el-date-picker 
                v-model="form.time"
                type="daterange"
                unlink-panels
                value-format="yyyyMMdd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:250px"
                @change='changetimekai($event)'
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="学费"
            :rules="[
                { required: true, message: '学费不能为空'}
              ]"
            :label-width="formLabelWidth">
          <el-input clearable v-model="form.money" placeholder="请输入学费" style="width:200px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="补贴标准" :label-width="formLabelWidth">
              <el-input clearable v-model="form.btbz" placeholder="请输入补贴标准" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班级人数" :label-width="formLabelWidth">
            <el-input clearable v-model="form.nums" placeholder="请输入班级人数" style="width:200px"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班主任"
            :label-width="formLabelWidth">
          <el-select v-model="form.valuebzr"
            @change="bzrId($event)" 
            placeholder="请选择班主任">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班主任联系电话" :label-width="formLabelWidth">
              <el-input placeholder="请输入联系方式" clearable v-model=" form.bzr_tel" type="nums" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="总培训时间" :label-width="formLabelWidth">
              <el-input v-model="form.jisuantime" clearable placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="授课点负责人电话"
              :label-width="formLabelWidth">
              <el-input  placeholder="请输入联系方式" clearable v-model="form.fzr_tel" type="nums" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="考试时间" :label-width="formLabelWidth">
              <el-date-picker
                @change="riqi($event)"
                value-format="yyyy-MM-dd"
                v-model="form.value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>            
          </el-col>
        </el-row>
        <el-row :gutter="20">          
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="上午授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="times"
                is-range
                arrow-control
                v-model="form.valuetimes"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="下午授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="timex"
                is-range
                arrow-control
                v-model="form.valuetimex"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="晚上授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="timew"
                is-range
                arrow-control
                v-model="form.valuetimew"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="cut == 1" @click="foundClass('ruleForm')">确 定</el-button>
        <el-button type="primary" v-else @click="editClassClick('ruleForm')">编辑</el-button>
      </div>
    </el-dialog>  
    <!-- 编辑 -->
    <el-dialog :title="title" width="980px" :visible.sync="dialogFormVisiblebj" @close='closeDialog(value)'>
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="地区" 
            :rules="[
                { required: true, message: '地区不能为空'}
              ]"
            :label-width="formLabelWidth">
              <div id="app">
                <el-cascader
                  size="large"
                  :options="optionsaa"
                  v-model="areaa"
                  @change="handleChange"> 
                </el-cascader>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班级名称"
            :rules="[
                { required: true, message: '班级名称不能为空'}
              ]"
            :label-width="formLabelWidth">
              <el-input clearable v-model="form.name" placeholder="请输入班级名称" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="授课地点" prop="skdd"
            :label-width="formLabelWidth">
          <el-input clearable v-model="form.skdd" placeholder="请输入授课地点" style="width:200px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="开班时间" :label-width="formLabelWidth">
              <el-date-picker 
                v-model="form.time"
                type="daterange"
                unlink-panels
                value-format="yyyyMMdd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:250px"
                @change='changetimekai($event)'
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="学费"
            :rules="[
                { required: true, message: '学费不能为空'}
              ]"
            :label-width="formLabelWidth">
          <el-input clearable v-model="form.money" placeholder="请输入学费" style="width:200px"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="补贴标准" :label-width="formLabelWidth">
              <el-input clearable v-model="form.btbz" placeholder="请输入补贴标准" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班级人数" :label-width="formLabelWidth">
            <el-input clearable v-model="form.nums" placeholder="请输入班级人数" style="width:200px"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班主任"
            :label-width="formLabelWidth">
          <el-select v-model="form.valuebzr"
            @change="bzrId($event)" 
            placeholder="请选择班主任">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="班主任联系电话" :label-width="formLabelWidth">
              <el-input placeholder="请输入联系方式" clearable v-model=" form.bzr_tel" type="nums" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="总培训时间" :label-width="formLabelWidth">
              <el-input v-model="form.jisuantime" clearable placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="授课点负责人电话"
              :label-width="formLabelWidth">
              <el-input  placeholder="请输入联系方式" clearable v-model="form.fzr_tel" type="nums" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" 
            label="考试时间" 
            :label-width="formLabelWidth">
              <el-date-picker
                @change="riqi($event)"
                value-format="yyyy-MM-dd"
                v-model="form.value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>            
          </el-col>
        </el-row>
        <el-row :gutter="20">          
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="上午授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="times"
                is-range
                arrow-control
                v-model="form.valuetimes"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="下午授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="timex"
                is-range
                arrow-control
                v-model="form.valuetimex"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="晚上授课时间" :label-width="formLabelWidth">
              <el-time-picker
                style="width:230px"
                @change="timew"
                is-range
                arrow-control
                v-model="form.valuetimew"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblebj = false">取 消</el-button>
        <el-button type="primary" @click="editClassClick('ruleForm')">编辑</el-button>
      </div>
    </el-dialog>  
    <!-- 添加课程 -->
    <el-dialog title="添加课程" :visible.sync="dialogFormVisiblebd" width="900px">
      <el-calendar >
      <template slot="dateCell" slot-scope="{ data }" class="calItem">
        <div
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calClick(data)">
          
          <p class="dayItem" v-if="data.day.substr(-2) < 10" @click="dialogVisible = true">
            {{ data.day.substr(-1) }}
          </p>
          <p class="dayItem" v-else>{{ data.day.substr(-2) }}</p>
          <div v-for="(item, index) in calendarData" :key="index">
            <div
              v-if="
                item.years.indexOf(data.day.split('-').slice(0)[0]) != -1 &&
                item.months.indexOf(data.day.split('-').slice(1)[0]) != -1 &&
                item.days.indexOf(data.day.split('-').slice(2).join('-')) != -1
              "
            >
              <!-- 日程上方 -->
              <el-tooltip :content="item.things" placement="right">
                <p class="mark">{{ item.things }}</p>
              </el-tooltip>
            </div>
            <div v-else></div>
          </div>
          <p
            class="addBtn"
            v-show="data.isSelected == true"
            @click="checklists">
            添加课程
          </p>
        </div>
        
      </template>
    </el-calendar>
      <el-dialog
      :title="formData.data"
      :visible.sync="dialogVisible"
      width="70%"
      heigth="80%"
      style="margin-top:100px;"
      :before-close="handleClose"
      :modal="false"
      @close='closeDialog(value)'
    >
      <el-form @submit.native.prevent>
        
        <el-form-item  style="margin-bottom:20px;" label="课程名称">
            <el-input style="width:200px;" v-model="formData.content" placeholder="请输入课程名称" class="inputa"></el-input>
            <el-input v-model="formData.remarks" placeholder="备注信息(选填)" style="margin-left:20px;width:200px;" class="inputa"></el-input>
        </el-form-item>
        <el-form-item  style="margin-bottom:20px;" label="上课时间">
            <el-time-picker
              @change="changeTime($event)"
              is-range
              v-model="valuetime1"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
          </el-form-item>
          <el-form-item style="margin-bottom:20px;" label="教师选择">
            <el-select v-model="value" placeholder="请选择教师" @change="chickvalue">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
        <el-table :data="gridData" style="width: 100%;">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column property="on_time" label="上下课时间"></el-table-column>
            <el-table-column property="date" label="上课日期"></el-table-column>
            <el-table-column property="name" label="课程"></el-table-column>
            <el-table-column property="note" label="备注"></el-table-column>
            <el-table-column property="te_id" label="授课教师"></el-table-column>
          </el-table>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="courseadd();">确 定</el-button>
      </span>
    </el-dialog>
    </el-dialog>

    <!-- 分配教师 -->
    <el-dialog title="添加教师" width="600px" :visible.sync="dialogFormVisiblebac">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item style="margin-bottom:20px;" label="教师名称">
          <el-input v-model="form.date" auto-complete="off"></el-input>
        </el-form-item>
        <el-button type="primary" @click="addteacher">确 定</el-button>
      </el-form>
    </el-dialog>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50,100]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">    
    </el-pagination>
  </div>
</template>

<script>
import Schedule from "../../components/classsss";
import { regionData,CodeToText,TextToCode } from 'element-china-area-data'
export default {
  
  components: {
    Schedule
  },
  data() {
    
    return {
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      userList: [],
      //课程
      gridData: [],
      value1: "",
      value2: "",
      valuetimes:'',
      valuetimex:'',
      valuetimew:'',
      valuetimeks:'',
      formData: {
        data: "",
        content: "",
        remarks:"",
      },
      valuetime:'',
      dialogVisible: false,
      calendarData: [
        { years: ["2020"], months: ["08", "11"], days: ["14"], things: "" },
        {
          years: ["2019"],
          months: ["10", "11"],
          days: ["02"],
          things: "",
        },
        { years: ["2020"], months: ["11"], days: ["02"], things: "" },
        { years: ["2019"], months: ["11"], days: ["02"], things: "" },
        { years: ["2020"], months: ["07"], days: ["15"], things: "" },
      ],
      value: new Date(),
      checkAll: false,
      isIndeterminate: true,
      //获取选择的日期
      getTime:[],
      //获取上课时间下课时间
      timeclass:'',
      //选择教师
      options: [],
      value: '',
      //时间选择
      valuetime1: null,
      loading: true,
      dialogFormVisible: false,
      dialogFormVisiblec: false,
      dialogFormVisiblebd: false,
      dialogFormVisiblebj: false,
      formLabelWidth: "150px",
      classId:'',
      valuedate:"",
      form: {}, // 设置form用于进行添加的时候绑定值
      currentIndex: "",
      title: "创建班级", //名称
      cut: 1, // 编辑添加切换
      dialogFormVisiblebac: false, //分配教师
      rules: {},
      valuemore:"",//多个日期
      input1: "", //搜索
      optionsaa: regionData,
      selectedOptions: [],
      bzr_Id:'',
      valueluru: [],
      jisuantime:"",
      area:'',
      areaa:'',
      TImes:'',
      TImex:'',
      TImew:'',
      TImeks:'',
      skdphone:'',
      bzrphone:'',
      class_id:'',
      kstimeL:'',
    };
  },
  created() {
    this.getClassList();
    this.thLists();
  },
  methods: {
    riqi(val){
      console.log(val);
      // this.value1 = val.slice(0,4)+val.slice(4,6)+val.slice(6,8)
      this.value1 = val
      console.log('this.value1',this.value1);
    },
    times(val){
      console.log(val);
      let a = val[0].toString().slice(16,21);
      let b = val[1].toString().slice(16,21);
      console.log(val[1]);
      this.TImes = a + '-' + b
      console.log(this.TImes);
    },
    timex(val){
      console.log(val);
      let a = val[0].toString().slice(16,21);
      let b = val[1].toString().slice(16,21);
      console.log(val[1]);
      this.TImex = a + '-' + b
      console.log(this.TImex);
    },
    timew(val){
      console.log(val);
      let a = val[0].toString().slice(16,21);
      let b = val[1].toString().slice(16,21);
      console.log(val[1]);
      this.TImew = a + '-' + b
      console.log(this.TImew);
    },
    timeks(val){
      console.log(val);
      console.log(val[0]);
      let a = val[0].toString().slice(16,21);
      console.log(a);
      let b = val[1].toString().slice(16,21);
      console.log(val[1]);
      this.TImeks = a + '-' + b
      console.log(this.TImeks);
    },
    handleCheckAllChange(val) {
        this.cities = val ? cities : [];
        this.isIndeterminate = false;
      },
    changetimekai(val){
      console.log(val[0],val[1]);
      let a = val[0].slice(0,4)+'-'+val[0].slice(4,6)+'-'+val[0].slice(6,8)
      let b = val[1].slice(0,4)+'-'+val[1].slice(4,6)+'-'+val[1].slice(6,8)
      console.log(val[0].slice(0,4)+'-'+val[0].slice(4,6)+'-'+val[0].slice(6,8));
      console.log(val[1].slice(0,4)+'-'+val[1].slice(4,6)+'-'+val[1].slice(6,8));
      this.datedifference(a,b)
    },
     datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
      var dateSpan,
      tempDate,
      iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      this.form.jisuantime = Math.floor(dateSpan / (24 * 3600 * 1000));
      this.$message({
              type: "success",
              message: "总培训时间为"+this.form.jisuantime+'天'
            });
      console.log(this.form.jisuantime);
      return iDays
     },
    handleChange (value) {
      // console.log(value)
        console.log(CodeToText[value[0]],CodeToText[value[1]],CodeToText[value[2]])
        this.area = CodeToText[value[0]] +'-'+CodeToText[value[1]] +'-'+CodeToText[value[2]]
        console.log(this.area);
        // console.log('111111111',value)
        // console.log("111",CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]);
      },
    closeDialog(val){
      val = ''
      // this.$refs[form].resetFields();
      if ( this .$refs["form"]!==undefined) {
          this.$refs["form"].resetFields();
      }
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
    //获取下拉框老师id
    chickvalue () {
    },
    //添加课程
    async courseadd(){
      let id = parseInt(this.classId)
      let add = (await this.$api.home.courseAdd({
        cid:id,
        te_id:this.value,
        on_time:this.timeclass,
        name:this.formData.content,
        date:this.formData.data,
        note:this.formData.remarks,
      })).data
      if(add.code == 200){
        this.$confirm("添加成功，是否继续添加","提示",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"primary",
        }).then(async ()=>{
          let a = (await this.$api.home.courseLists({
            cid:this.classId,
            date:this.formData.data,
          })).data.data
          console.log("aaa",a);
          this.gridData = a
        })
      }else{
        this.$notify.error({
          title: '错误',
          message: add.msg
        });
      }
    },
    //点击添加课程p标签
    async checklists(){
      this.dialogVisible = true
    },
    //获取选择的时间
    changeTime(val){
      this.getTime = val
      let a = this.getTime[0].toString().slice(16,21);
      let b = this.getTime[1].toString().slice(16,21);
      this.timeclass = a+'-'+b
    },
    changeTimekaoshi(val){
      console.log("val",val);
      // let a = val[0].toString().slice(16,21);
      console.log("a",val[0]);
      
    },
    //教师列表
    async thLists(){
      let lists = (await this.$api.home.teacherLists()).data.data
      this.options = lists
    },
    //点击添加课程显示课程列表
    async addClass(row) { 
      this.classId = row.id
      this.dialogFormVisiblebd = true;
    },
    async calClick(item) {
      this.formData.data = item.day;
      let a = (await this.$api.home.courseLists({
        cid:this.classId,
        date:this.formData.data,
      })).data.data
      this.gridData = a
    },
    handleClose(done) {
      done();
    },
    add() {
      var date = this.formData.data.split("-");
      var a = {
        years: [date[0]],
        months: [date[1]],
        days: [date[2]],
        things: this.formData.content,
      };
      this.calendarData.push(a);
    },

    //获取班级列表
    async getClassList() {
      var _this = this;
      this.userList = (await this.$api.home.classList()).data.data;
      console.log(this.userList);
      this.form = this.userList
      console.log("this.form",this.form);
      this.userList.forEach(e => {
        let str = e.start_time.toString();
        str = this.insertStr(str, 4, "-");
        str = this.insertStr(str, 7, "-");
        let str1 = e.end_time.toString();
        str1 = this.insertStr(str1, 4, "-");
        str1 = this.insertStr(str1, 7, "-");
        let str2 = e.ks_time.toString();
        // str2 = this.insertStr(str2, 4, "-");
        // str2 = this.insertStr(str2, 7, "-");
        e.end_time = str1;
        e.start_time = str;
        e.ks_time = str2
        e.total_day = e.total_day+'天'
      });
    },
    //分配教师
    addteacher() {
      this.dialogFormVisiblebac = true;
    },
    //课程表
    Schedule() {
      this.dialogFormVisiblec = true;
    },
    
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.title = "创建班级";
      this.form = {};
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
      this.cut = 1;
    },
    
    insertStr(soure, start, newStr) {
      return soure.slice(0, start) + newStr + soure.slice(start);
    },
    bzrId(val){
      this.bzr_Id = val
      console.log(val);
    },
    //创建班级
    foundClass(formName) {
      if(typeof(this.form.time) == 'undefined'){
        console.log(33);
            this.$message({
              message: "请将信息填写完整",
              type: "error"
            });
      }else{
        this.$refs[formName].validate(async valid => {
        //开启校验
        // if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          let params = {
            name: this.form.name,//班级名称
            nums: this.form.nums,//班级人数
            start_time: this.form.time[0],//开始时间
            end_time: this.form.time[1],//结束时间
            money: this.form.money,//学费
            area:this.area,//地区
            skdd:this.form.skdd,//授课地点
            btbz:this.form.btbz,//补贴标准
            fzr_tel:this.form.fzr_tel,//负责人电话
            bzr_tel:this.form.bzr_tel,//班主任电话
            ks_time:this.Timesks,//考试时间
            sk_time_1:this.TImes,//上午
            sk_time_2:this.TImex,//下午
            sk_time_3:this.TImew,//晚上
            total_day:this.jisuantime,//总培训时间
            // bzr_id:this.bzrId,//班主任id
          };
          let addForm = await this.$api.home.addClass({
            name: this.form.name,//班级名称
            nums: this.form.nums,//班级人数
            start_time: this.form.time[0],//开始时间
            end_time: this.form.time[1],//结束时间
            money: this.form.money,//学费
            area:this.area,//地区
            skdd:this.form.skdd,//授课地点
            btbz:this.form.btbz,//补贴标准
            fzr_tel:this.form.fzr_tel,//负责人电话
            bzr_tel:this.form.bzr_tel,//班主任电话
            ks_time:this.form.value1,//考试时间
            sk_time_1:this.TImes,//上午
            sk_time_2:this.TImex,//下午
            sk_time_3:this.TImew,//晚上
            total_day:this.form.jisuantime,//总培训时间
            bzr_id:this.bzr_Id,//班主任id
          });
          if (addForm.data.code == 200) {
            this.$message({
              message: "创建成功",
              type: "success"
            });
            this.dialogFormVisible = false;
            this.getClassList();
          } else {
            this.$message.error(addForm.data.msg);
          }
        // } else {
        //   //校验不通过
        //   this.$message.error("校验不通过");
        //   return false;
        // }
      });
      }
    },
    //编辑班级
    editClass(index,val) {
      console.log(val);
      console.log(val.ks_time);
      this.class_id = val.id
      let timea = val.sk_time_1.slice(0,2)
      let timeb = val.sk_time_1.slice(3,5)
      let timec = val.sk_time_1.slice(6,8)
      let timed = val.sk_time_1.slice(9)
      let timeaa = val.sk_time_2.slice(0,2)
      let timebb = val.sk_time_2.slice(3,5)
      let timecc = val.sk_time_2.slice(6,8)
      let timedd = val.sk_time_2.slice(9)
      let timead = val.sk_time_3.slice(0,2)
      let timebc = val.sk_time_3.slice(3,5)
      let timecb = val.sk_time_3.slice(6,8)
      let timeda = val.sk_time_3.slice(9)
      let times = [new Date(2021,5,19,timea,timeb),new Date(2021,5,19,timec,timed)]
      let timex = [new Date(2021,5,19,timeaa,timebb),new Date(2021,5,19,timecc,timedd)]
      let timew = [new Date(2021,5,19,timead,timebc),new Date(2021,5,19,timecb,timeda)]
      this.title = "编辑班级";
      this.dialogFormVisiblebj = true;
      this.cut = 2;
      let time = [];
      val.start_time = val.start_time.split("-").join("");
      val.end_time = val.end_time.split("-").join("");
      let kstin = val.ks_time.slice(0,10)
      let a = val.area.split('-')
      let b= []
     
      let a0 = a[0]
      let a1 = a[1]
      let a2 = a[2]
      let a00 = TextToCode[a[0]].code 
      let a11 = TextToCode[a0][a1].code 
      let a22 = TextToCode[a0][a1][a2].code 
      b.push(a00)
      b.push(a11)
      b.push(a22)
      this.areaa = b
      time.push(val.start_time.toString(), val.end_time.toString());
      this.form = {
        name: val.name,
        money: val.money,
        nums: val.nums,
        time: time,
        id: val.id,
        start_time:val.start_time,
        end_time:val.end_time,
        area:val.area,
        skdd:val.skdd,
        btbz:val.btbz,
        fzr_tel:val.fzr_tel,
        bzr_tel:val.bzr_tel,
        jisuantime:val.total_day,
        valuetimes:times,
        valuetimex:timex,
        valuetimew:timew,
        jisuantime:val.total_day,
        valuebzr:val.bzr_id,
        value1:kstin
      };
    },
    editClassClick(formName) {
      if(this.areaa == ''){
        this.$message({
              message: "请将信息填写完整",
              type: "error"
            });
      }else{
        this.$refs[formName].validate(async valid => {
        //开启校验
        // if (valid) {
          // 如果校验通过，请求接口，允许提交表单
        let swtime = this.form.valuetimes[0].toString().slice(16,21)+'-'+this.form.valuetimes[1].toString().slice(16,21)
        let xwtime = this.form.valuetimex[0].toString().slice(16,21)+'-'+this.form.valuetimex[1].toString().slice(16,21)
        let wstime = this.form.valuetimew[0].toString().slice(16,21)+'-'+this.form.valuetimew[1].toString().slice(16,21)
        let areaall = CodeToText[this.areaa[0]]+'-'+CodeToText[this.areaa[1]]+'-'+CodeToText[this.areaa[2]]
        let tolday = this.form.jisuantime.toString().slice(0,2)
          let addForm = await this.$api.home.editClass({
            id:this.class_id,//班级id
            name: this.form.name,//班级名称
            nums: JSON.stringify(this.form.nums),//班级人数
            start_time: this.form.time[0],//开始时间
            end_time: this.form.time[1],//结束时间
            money: this.form.money,//学费
            area:areaall,//地区
            skdd:this.form.skdd,//授课地点
            btbz:this.form.btbz,//补贴标准
            fzr_tel:this.form.fzr_tel,//负责人电话
            bzr_tel:this.form.bzr_tel,//班主任电话
            ks_time:this.form.value1,//考试时间 
            sk_time_1:swtime,//上午
            sk_time_2:xwtime,//下午
            sk_time_3:wstime,//晚上
            total_day:tolday,//总培训时间
            bzr_id:this.bzr_Id,//班主任id
          });
          if (addForm.data.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.dialogFormVisiblebj = false;
            this.getClassList();
          } else {
            this.$message.error(addForm.data.msg);
          }
      });
      }
      
    },
    //删除班级
    delClass(index, row) {
      let a = localStorage.getItem('name').replace(/\"/g,"")
      if(a == '超级管理员'){
this.$confirm("永久删除该班级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let params = {
            id: row.id
          };

          let del = await this.$api.home.delClass(params);
          if (del.data.code == 200) {
            this.getClassList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message.error(del.data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      }else{
        this.$message({
              message: "只有超级管理员可以删除班级信息",
              type: "error"
            });
      }
      // 设置类似于console类型的功能
      
    },

    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.name.match(searchText);
        });
        this.userList = list;
      } else {
        this.getClassList()
      }
    }
  },
    
    
  
};
</script>
<style lang="less" scope>
.spansearch{
  color: #409EFF;
   font-size: 15px;
   margin-left: 20px;
}
.tableMain {
  margin-top: 10px;
}
.page {
  float: left;
  margin-top: 10px;
}
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
}
.mark {
  color: #f8a535;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "当月";
}
.el-backtop,
.el-calendar-table td.is-today {
  color: #f8a535 !important;
}
.calItem {
  /* font-size: 20px */
  overflow: hidden;
}
.abcd {
  margin-bottom: 20px;
}
.dayItem {
  text-align: center;
}
.addBtn {
  text-align: center;
}
.el-tooltip .mark {
  text-align: center;
}
.inputa{
  width: 150px;
  
}

.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>